<template>
    <div class="bg">
        <div class="top">
            <div class="">
                <span class="topa" v-bind:class="{achecked: isAricon,topw:achecked===checkindex}"
                      @mousemove="isAricon=true" @mouseleave="isAricon=false" @click="checksearch(0)">所有订单</span>
            </div>
            <div class="">
                <span class="topa" v-bind:class="{achecked: isBricon,topw:bchecked===checkindex}"
                      @mousemove="isBricon=true" @mouseleave="isBricon=false" @click="checksearch(1)">待支付订单</span>
            </div>
            <div>
                <span class="topa" v-bind:class="{achecked: isCricon,topw:cchecked===checkindex}"
                      @mousemove="isCricon=true" @mouseleave="isCricon=false" @click="checksearch(2)">已完成订单</span>
            </div>
            <div class="topd">
            </div>
        </div>

        <div class="show" v-if="notdata">
            <span class="el-icon-film" style="font-family: 隶书;font-size: 30px;color: gray">暂时没有数据</span>
        </div>
        <div v-if="!notdata">
            <div style="padding-left:25px " v-for="(item,index) in orderData.records" :key="index">
                <div class="order">
                    <el-row class="fufu">
                        <el-col :span="24" class="fu">
                            <div class="grid-content">订单号:{{item.orderNo}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.gmtCreate}}</div>
                        </el-col>
                    </el-row>
                    <div class="order-content">
                        <div class="order-left">
                            <img class="order-img" :src="item.courseCover">
                            <p class="order-font">{{item.courseTitle}}</p>
                        </div>
                        <div class="order-right">
                            <ul style="list-style: none;margin: 0;padding: 0">
                                <li class="order-li" style="color: #d51423">￥{{item.totalFee}}</li>
                                <li class="order-li" v-if="item.payType===1">微信支付</li>
                                <li class="order-li" v-if="item.payType===2">支付宝支付</li>
                                <li class="order-li" style="color: #09f" v-if="item.status===0">未支付</li>
                                <li class="order-li" style="color: #09f" v-if="item.status===1">已支付</li>
                                <li class="order-li" v-if="item.status===1">
                                    <div>
                                        <el-button plain
                                                   style="width: 76px ;height: 30px;padding: 2px;margin-left: 2px" @click="toClass(item.courseId)">进入学习
                                        </el-button>
                                    </div>
                                </li>
                                <li class="order-li" style="padding: 0" v-if="item.status===0">
                                    <div style="height: 20px;width: 76px;border-radius: 6px;border: 1px solid orange;padding:10px 0 0 0;margin-left: 20px;color: orange "
                                         @click="Pay(item)">
                                        继续支付
                                    </div>
                                    <el-popconfirm
                                            title="确定删除订单？"
                                            @confirm="noPay(item)"
                                    >
                                        <template #reference>
                                            <div style="height: 10px;margin-top: 10px">取消支付</div>
                                        </template>
                                    </el-popconfirm>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block">
                <el-pagination
                        :hide-on-single-page="value"
                        :total="total"
                        :page-size="6"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next">
                </el-pagination>
            </div>
<!--            支付弹框-->
            <div>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose"
                >
<!--                    图片-->
                    <div>
                        <!--                        微信-->
                        <div style="display: inline-block">
                            <img width="190px" height="110px" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3428956160,4062918037&fm=26&gp=0.jpg">
                        </div>
<!--                        支付宝-->
<!--                        <div style="display: inline-block">-->
<!--                            <img width="190px" height="110px" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3003998577,4159958951&fm=26&gp=0.jpg">-->
<!--                        </div>-->
                    </div>
                    <div>{{pay}}支付{{wx.total_fee}}元</div>
<!--                    二维码-->
                    <div>
                        <vue-qr
                                :text="wx.code_url"
                                :margin="0"
                                colorDark="green"
                                :logoSrc="require('@/assets/1.jpg')"
                                colorLight="#fff"
                                :size="200">
                        </vue-qr>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import vueQr from 'vue-qr'
    import axios from "axios";
    export default {
        name: "order",
        components:{
          vueQr
        },
        data() {
            return {
                isAricon: false,
                isBricon: false,
                isCricon: false,
                achecked: 0,
                bchecked: 1,
                cchecked: 2,
                checkindex: 0,
                notdata: false,
                dialogVisible: false,
                //收到的数据
                orderData: {},
                //查询的数据
                orderSearch: {},
                //分页
                value: true,
                //总条数
                total: 0,
                //第几页
                page: 1,
                //订单支付方式
                pay:'微信',
                wx:{
                    code_url:"", //二维码的地址
                    out_trade_no:"5", //订单号
                    total_fee:0, //支付的金额
                    course_id:"", //课程id
                    logoSrc:"assets/1.jpg"//微信二维码中间小logo
                },
                //定时
                timer1:'',
            }
        },
        methods: {
            //切换状态
            checksearch(a) {

                this.notdata=false;
                this.checkindex = a;
                this.page=1;
                if (a === 0) {
                    this.orderSearch.status = ''
                    this.searchOrder();
                } else if (a === 1) {
                    this.orderSearch.status = 0;
                    this.searchOrder();
                } else {
                    this.orderSearch.status = 1;
                    this.searchOrder()
                }
            },
            //前往课程
            toClass(id){
                this.$router.push({
                    path:'/courseDetails',
                    query:{
                        key:id
                    }
                })
            },
            //查询用户
            searchMember() {
                var that = this;
                var token = sessionStorage.getItem("token");
                this.$http.get(`/member/findMemberByToken/${token}`).then(function (successCallback) {
                    if (successCallback.data.code === 2000) {
                        that.orderSearch.mobile = successCallback.data.result.mobile;
                        that.searchOrder()
                    }
                })
            },
            //查询订单
            searchOrder() {
                var that = this;
                that.orderSearch.isDeleted = 0;
                this.$http.post(`/order/list/${this.page}/5`, that.orderSearch).then(function (success) {
                    that.orderData = success.data.result;
                    if (success.data.result.total !== '') {
                        that.total = success.data.result.total;
                        that.value = true;
                        if (that.total===0){
                            that.notdata=true;
                        }
                    }

                })
            },
            //获取支付二维码
            Pay(row) {
                var that=this;
                this.dialogVisible=true;
                this.$http.get(`/order/pay/createNatice/${row.orderNo}`).then(function (success) {
                    if (success.data.code===2000){
                        that.wx=success.data.result
                        // 设置一个定时任务，每隔3秒调用一次
                        //检查订单
                        that.timer1 = setInterval(() => {
                            that.queryPayStatus(that.wx.out_trade_no)
                        }, 3000);
                    }
                })
            },
            //检查支付状态
            queryPayStatus(orderNo){
                var that=this;
                axios.get("/order/pay/getPayStatus/"+orderNo).then(r=>{
                    if(r.data.code===2000){
                        //如果支付成功，清除定时器
                        clearInterval(that.timer1)
                        that.timer1=null;
                        that.$notify({
                            title: 'success',
                            message: '订单支付成功！',
                            type: 'success'
                        });
                        that.dialogVisible=false;
                        that.searchOrder();
                    }
                })
            },
            //关闭付款
            handleClose(done) {
                var that=this;
                this.$confirm('确认取消支付？')
                    .then(_ => {
                        done();
                        that.$notify({
                            title: '取消',
                            message: '订单被取消！',
                            type: 'error'
                        });
                    })
                    .catch(_ => {});
            },
            //删除订单
            noPay(row) {
                var that = this;
                row.isDeleted = 1;
                this.$http.post(`/order/upOrder`, row).then(function (success) {
                    if (success.data.code === 200) {
                        that.$notify({
                            title: '成功',
                            message: '订单删除成功',
                            type: 'success'
                        });
                        that.searchOrder();
                    } else {
                        that.$notify.error({
                            title: '错误！',
                            message: '订单删除失败'
                        });
                    }
                })
            },
            //改变页数
            handleCurrentChange(val) {
                console.log(val)
                this.page = val;
                this.searchOrder();
            }
        },
        mounted(){

        },
        created() {
            this.searchMember()
        }
    }
</script>

<style scoped>

</style>